<template>
  <div class="wrapper">
    <u-navbar
      title="登录"
      :custom-back="onLeftClick"
      :title-bold="false"
    ></u-navbar>
    <div class="logo-pane">
      <div class="logo-img">
        <image mode="aspectFit" src="../static/images_qccx/logo.png" />
      </div>
      <text class="logo-text">您好，欢迎登录</text>
    </div>
    <div class="account-pane">
      <u-form :model="form" ref="uForm" label-position="top">
        <u-form-item
          class="custom-form-item"
          label="账号"
          prop="userName"
          :label-style="{
            fontSize: '28rpx',
            color: '#767676',
            height: '44rpx',
            lineHeight: '44rpx',
          }"
        >
          <u-input
            class="custom-input"
            placeholder-style="fontSize: 32rpx;color: #C9CDD4"
            v-model="form.userName"
            placeholder="请输入账号"
          />
        </u-form-item>
        <u-form-item
          class="custom-form-item"
          label="密码"
          prop="password"
          style="margin-top: 40rpx"
          :label-style="{
            fontSize: '28rpx',
            color: '#767676',
            height: '44rpx',
            lineHeight: '44rpx',
          }"
        >
          <u-input
            class="custom-input"
            placeholder-style="fontSize: 32rpx;color: #C9CDD4"
            v-model="form.password"
            type="password"
            placeholder="请输入密码"
          />
        </u-form-item>
      </u-form>
      <u-button
        style="margin-top: 80rpx"
        type="primary"
        :customStyle="{
          background:
            form.userName && form.password ? '#FF874FFF' : '#DDDDDDFF',
        }"
        :loading="okLoading"
        @click="onLoginClick"
        >登录</u-button
      >
    </div>
    <imgCodeModal ref="imgCodeModalRef" @success="afterLogin" @security-verification="handleSecurityVerification" />
  </div>
</template>
<script>
import imgCodeModal from "./components/img-code-modal.vue";
import { login, getUserInfo } from "@/api/qccx";
import { mapMutations } from "vuex";
export default {
  components: { imgCodeModal },
  data() {
    return {
      form: {},
      rules: {
        userName: [
          {
            required: true,
            message: "请输入账号",
            trigger: ["blur"],
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur"],
          },
        ],
      },
      okLoading: false,
    };
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  methods: {
    ...mapMutations(["CLEAR_USER_INFO"]),
    // 退出登录
    onLeftClick() {
      WeixinJSBridge && WeixinJSBridge.call("closeWindow");
    },
    /**
     * 登录
     */
    onLoginClick() {
      if (this.form.userName && this.form.password) {
        this.okLoading = true;
        // 登录
				login(this.form).then(res => {
					if(res.code == 200){
						const { result } = res
						if (result.status) {
							this.afterLogin()
						} else {
              this.okLoading = false;
              const statusCode = result.statusCode;
							if (statusCode) {
                // 状态码 20
                if (statusCode == 20) {
                  this.$refs.imgCodeModalRef.open(
                    {
                      userName: this.form.userName,
                      password: this.form.password,
                    },
                    "login"
                  );
                }
                // 安全认证
                if (statusCode == 30) {
                  // 手机号后四位
                  const encryptionPhoneNumber = loginRes.message
                  this.handleSecurityVerification(encryptionPhoneNumber)
                }
							} else {
								uni.showToast({
									icon: 'none',
									title: result.message,
								})
							}
						}
					} else {
            this.okLoading = false
					}
				}).catch(error => {
					this.okLoading = false
				})
      }
    },
    // 登录成功后的回调
    afterLogin() {
      // 获取用户信息
      getUserInfo({}).then((res) => {
        if (res.code == 200) {
          const result = res.result;
          const userInfo = result.userInfo;
          this.$store.commit("SET_USER_INFO", userInfo);

          // 获取按钮权限
          this.$store
            .dispatch("GET_PERMISSION")
            .then(() => {
              this.okLoading = false;
              this.form = {};
              uni.reLaunch({
                url: "/pages_qccx/index",
              });
            })
            .catch(() => {
              this.okLoading = false;
            });
        }
      });
    },
    // 跳转安全认证
    handleSecurityVerification(encryptionPhoneNumber) {
      const param = {
        userName: this.form.userName,
        password: this.form.password,
        encryptionPhoneNumber: encryptionPhoneNumber,
      }
      uni.setStorageSync('securityVerificationForm', param)
      uni.navigateTo({
        url: "/pages_qccx/security-verification",
      })
    }
  },
};
</script>
<style lang="less" scoped>
.wrapper {
  background-color: #ffffff;
  min-height: 100vh;
  .logo-pane {
    padding-top: 48rpx;
    text-align: center;
    .logo-img {
      margin-bottom: 16rpx;
      image {
        width: 96rpx;
        height: 96rpx;
      }
    }
    .logo-text {
      font-weight: 600;
      font-size: 18px;
      color: #1a1a1a;
    }
  }
  .account-pane {
    padding: 68rpx 64rpx;
    .custom-input {
      border-bottom: 1rpx solid #e5e5e5ff;
    }
  }
}
</style>
